<template>
  <div class="w-full flex flex-col h-full">
    <div class="flex items-center justify-between text-lg py-8">
      <div>
        {{ data.length }}个备忘录
      </div>
      <div>
        按日期排序
        <Icon name="tabler:chevron-down" />
      </div>
    </div>
    <div class="relative bg-white rounded-2xl w-full h-full">
      <img src="/flower.png" alt="" class="absolute -bottom-6 -left-6 w-80">
      <img src="/flower.png" alt="" class="absolute -top-6 -right-6 w-80 rotate-180">
      <div class="p-8 inset-0 absolute overflow-y-auto flex-col flex gap-4">
        <div v-for="memo in data" :key="memo.id" class="text-lg font-bold">
          <p>
            {{ memo.title }} : {{ memo.content }}
          </p>
          <p class="text-sm text-gray-500 font-medium">
            {{ useDateFormat(memo.createdAt,'M月D日 HH:mm:ss').value }}
          </p>
        </div>
      </div>
    </div>
    <NuxtLink class="self-end mt-4 cursor-pointer z-10" to="/memo/edit">
      <Icon name="tabler:pencil" class="text-4xl" />
    </NuxtLink>
  </div>
</template>

<script setup>
const { data } = useFetch('/api/memo')
</script>
